<template>
  <div>
    <div v-for="(item, key) in menuList" :key="key">
      <el-submenu :index="item[props.index]" v-if="item[props.children] && item[props.children].length > 0">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{item[props.label]}}</span>
        </template>
        <!-- 递归调用 -->
        <sub-menu :menuList="item[props.children]" :props="props"/>
      </el-submenu>
      <el-menu-item :index="item[props.index]" v-else>
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{item[props.label]}}</span>
        </template>
      </el-menu-item>
    </div>
  </div>
</template>

<script>

export default {
  name: 'subMenu',
  props: {
    menuList:{
      type:Array,
      default () {
        return []
      },
    },    
    props: {
      type: Object,
      default() {
        return {
          children: "children",
          label: "title",
          index: "path",
        };
      },
    },
  },
  components: {},
  data() {
    return {

    };
  },
  computed: {},
  mounted() {},
  methods: {},
  watch: {},
}
</script>
<style lang='stylus' scoped>
//@import url(); 引入公共css类
</style>